<template>
  <view class="cloud-adopt-wrapper">
    <view class="header-wrapper">
      <view class="name-bg">
        <u--image
          src="/static/cloudAdopt/bg_cloud_adopt_toast.png"
          width="722rpx"
          height="300rpx"
          mode="widthFix"
        ></u--image>
      </view>

      <view class="img-rainbow">
        <u--image
          src="/static/cloudAdopt/bg_cloud_adopt_rainbow.png"
          width="450rpx"
          height="372rpx"
        ></u--image>
      </view>

      <view class="avatar-wrap">
        <view class="avatar">
          <u--image
            :src="petInfo.petAvatar"
            width="176rpx"
            shape="circle"
            height="176rpx"
          ></u--image>
        </view>
      </view>
      <view class="ring">
        <u--image
          src="/static/cloudAdopt/icon_pet_avatar_ring.png"
          width="263rpx"
          height="170rpx"
        ></u--image>
      </view>
      <view class="close-wrap">
        <u-icon
          name="close-circle"
          color="#fff"
          size="50rpx"
          @click="close()"
        ></u-icon>
      </view>
      <view class="name-wrap">
        <text class="adpot-name">@{{ petInfo.petName }} 认养我吧</text>
      </view>
      <view class="content-wrapper flex flex-y">
        <adoptServiceIntro
          v-if="showStep === '0'"
          @sureAdopt="sureAdopt"
        ></adoptServiceIntro>
        <selectAdoptCombo
          v-if="showStep === '1'"
          :start-time="petInfo.startTime"
          @surePay="surePay"
        ></selectAdoptCombo>
      </view>
    </view>
  </view>
</template>

<script>
import adoptServiceIntro from './adoptServiceIntro.vue';
import selectAdoptCombo from './selectAdoptCombo.vue';
import {
  cloudAdoptOrderSubmit,
  getTiktokPayParamOfPet,
} from '@/api/pet-core.js';
import { ttPay } from '@/utils/pay.js';
import { TT_PAY_STATUS } from '@/const/index.js';
export default {
  components: {
    adoptServiceIntro,
    selectAdoptCombo,
  },
  props: {
    petInfo: {
      type: Object,
      value: () => {},
    },
    step: {
      type: String,
      value: '0',
    },
  },
  data() {
    return {
      TT_PAY_STATUS,
      cloudAdoptionIntro: '',
      nickName: '',
      showStep: this.step,
    };
  },
  mounted() {},

  methods: {
    close() {
      this.$emit('payFail');
    },
    sureAdopt(data) {
      this.nickName = data.nickName;
      this.showStep = data.step;
    },
    // paySuccess(data) {
    //   this.$emit('paySuccess', data);
    // },
    async surePay(data) {
      const that = this;
      const param = {
        petId: this.petInfo.petId,
        packageId: data,
        checkType: this.petInfo.checkType,
        signName: this.nickName,
      };
      uni.showLoading({
        title: '加载中...',
        mask: true,
      });
      try {
        const res = await cloudAdoptOrderSubmit(param);
        const payRes = await getTiktokPayParamOfPet(res.data.sn);
        console.log('payRes', payRes);
        ttPay(res.data.sn, payRes.data.data, payRes.data.token)
          .then((result) => {
            uni.hideLoading();
            if (result.code === TT_PAY_STATUS.SUCCESS) {
              uni.$emit('adoptSuccess');
              that.$emit('paySuccess', res.data.sn);
            } else {
              that.$emit('payFail');
              uni.showToast({
                title: result.msg,
                icon: 'none',
              });
            }
          })
          .catach((err) => {
            uni.hideLoading();
          });
      } catch (err) {
        uni.hideLoading();
        if (err.data && err.data.code === 50136) {
          this.showStep = '0';
        }
      }
    },
  },
};
</script>

<style lang="scss">
.cloud-adopt-wrapper {
  width: 100%;
  flex: 1;
  display: flex;
  flex-direction: column;
  .header-wrapper {
    position: relative;
    .img-rainbow {
      display: flex;
      align-items: center;
      justify-content: center;
    }
    .close-wrap {
      position: absolute;
      top: 0;
      right: 0;
      display: flex;
      margin: 168rpx 30rpx 0 0;
      align-items: end;
    }
    .avatar-wrap {
      position: absolute;
      top: 0;
      left: 0;
      right: 0;
      .avatar {
        display: flex;
        align-items: center;
        margin-top: 104rpx;
        justify-content: center;
      }
    }
    .ring {
      position: absolute;
      top: 0;
      width: 100%;
      display: flex;
      margin-top: 104rpx;
      align-items: center;
      justify-content: center;
    }
    .name-wrap {
      position: absolute;
      top: 0;
      text-align: center;
      width: 100%;
      display: flex;
      margin-top: 300rpx;
      align-items: center;
      justify-content: center;
      .adpot-name {
        height: 48rpx;
        background-image: linear-gradient(180deg, #ff79ec 0%, #ff37ac 100%);
        border-radius: 26rpx;
        color: #ffffff;
        font-size: 24rpx;
        font-weight: 500;
        padding: 0 38rpx;
        line-height: 48rpx;
      }
    }
    .name-bg {
      position: absolute;
      top: 0;
      width: 100%;
      display: flex;
      margin-top: 208rpx;
      align-items: center;
      justify-content: center;
    }
    .content-wrapper {
      flex: 1;
    }
  }
  .button-wrapper {
    width: 100%;
    background-color: #ffffff;
    .adopt-btn {
      height: 96rpx;
      background: #ff7ce3;
      border-radius: 48rpx;
      line-height: 96rpx;
      margin: 24rpx 48rpx;
      text-align: center;
      font-weight: 600;
      font-size: 32rpx;
      color: #ffffff;
    }
  }
}
</style>
